<template>
    <div class="ranking">
 
      
      <!-- <div class="box2">
          <h3 @click="$router.push('/FilmList')" style="cursor:pointer;">电影排行榜</h3>
      </div> -->

      <div class="table">
        <el-table :data="tableData" style="width: 100%;height: 98%;" @row-click = "onRowClick" :row-class-name="tableRowClassName" class="point">
            <el-table-column prop="name" label="电影名" min-width="40%"> </el-table-column>
            <el-table-column prop="totalScore" label="评分" min-width="15%"> </el-table-column>
            <el-table-column prop="releaseDate" label="上映时间" min-width="20%"> </el-table-column>
        </el-table>
      </div>
    
    </div>
  </template>
  
  
  <script>
  // import {created} from "vue";
  import axios from 'axios';
  import { rankScore } from "../api/index.js";
import { inc } from 'nprogress';
    export default {
      data() {
        return {
          tableData:[],
          length:0,
        }
      },
      methods:{
        async getData(){
            let data=await rankScore();
            // print(data)
            this.tableData=data[0]
        },
        onRowClick (row, event, column) {
          //点击获取索引
          const index = row.index;
          this.$router.push('/FilmDetail?id='+this.tableData[index].movieId)
        },
        
        tableRowClassName ({row, rowIndex}) {
          //把每一行的索引放进row
          row.index = rowIndex;
        },
      },  
      created() {
            this.getData().then(()=>{
                this.length=this.tableData.length
            })
        },
  }
        
  </script>

  <style scoped>
     .ranking{
       width:100%;
       height:100%;
       box-sizing: border-box;
     }
     .box1{
        width:100%;
        height:10%;
        padding-top: 30px;
     }
      h2 {
          color: #fff;
          line-height: 0.6rem;
          text-align: center;
          font-family: 'a';
      }
      h3 {
          height: 0.6rem;
          color: #fff;
          text-align: center;
      }
      .box2{
        width:100%;
        height:10%;
        padding-top:20px;
      }
      .table{
        width:100%;
        height: 98%;
        padding-top:20px;
      }
      
     .table .el-table,  .table .el-table__expanded-cell{
        background-color: transparent;
      }
/* 表格内背景颜色 */
    .el-table /deep/ th,.el-table /deep/ tr,.el-table /deep/ td{
        background-color: transparent;
        color:#f6bebe;
        border-bottom: 0;
    }
    .table /deep/ .el-table__inner-wrapper::before{
        height:0px;
    }
    .point{
      cursor: pointer;
    }
  </style>